<!-- flex 布局按钮 -->
<template>
  <a-flex :justify="justify" :gap="gap">
    <a-button class="button" v-for="(item, index) in buttons" :key="index" v-bind="omit(item, ['children'])">
      <component v-if="item.children" :is="item.children" />
    </a-button>
  </a-flex>
</template>
<script setup lang="ts">
  import { type ButtonProps, type FlexProps } from 'ant-design-vue';
  import { type h } from 'vue';
  import { omit } from 'lodash-es';

  export interface FlexButtonsProps extends ButtonProps {
    children: ParametersOne<typeof h, 2>;
  }

  interface Props {
    buttons: FlexButtonsProps[];
    justify?: FlexProps['justify'];
    gap?: number;
  }
  withDefaults(defineProps<Props>(), {
    justify: 'center',
    gap: 8,
  });
</script>
<style lang="less" scoped>
  .button {
    padding: 0;
    margin: 0;
  }
</style>
